<template>
  <div>
    <el-card>
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="110px">
        <title-line title="基本信息" />
        <el-form-item label="经营状态" prop="operationStatus">
          <el-radio-group v-model="formData.operationStatus">
            <el-radio v-for="(item, index) in OPERATE_STATUS" :key="index" :label="item.value">
              {{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="关闭原因图" prop="closeReasonUrl">
          <UploadImage
            :isShowTip="true"
            :limit="1"
            :file-type="['jpg', 'png', 'jpeg']"
            file-pixel="640*670"
            :file-size="1"
            @on-change="uploadCloseChange"
            v-model="formData.closeReasonUrl"
          />
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="平台名称" prop="shopName">
              <el-input v-model="formData.shopName" placeholder="请输入小程序名称" clearable />
            </el-form-item>
            <el-form-item label="定位语" prop="shopMsg">
              <el-input v-model="formData.shopMsg" placeholder="请输入平台定位语" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="平台logo" prop="shopLogoUrl">
          <UploadImage
            :isShowTip="true"
            :file-type="['jpg', 'png', 'jpeg']"
            file-pixel="120*120"
            :file-size="1"
            @on-change="uploadLogoChange"
            v-model="formData.shopLogoUrl"
          />
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="联系地址" prop="address">
              <el-input v-model="formData.address" placeholder="请输入联系地址" clearable />
            </el-form-item>
            <el-form-item label="客服开关" prop="isCustom">
              <el-radio-group v-model="formData.isCustom">
                <el-radio v-for="(item, index) in SERVICE_STATUS" :key="index" :label="item.value">
                  {{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="客服电话" prop="customPhone">
              <el-input v-model="formData.customPhone" placeholder="请输入客服电话" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="客服图标" prop="customIcon">
          <UploadImage
            :isShowTip="true"
            :file-type="['jpg', 'png', 'jpeg']"
            file-pixel="60*60"
            :file-size="1"
            @on-change="uploadIconChange"
            v-model="formData.customIcon"
          />
        </el-form-item>
        <el-form-item label="开机页" prop="startPage">
          <UploadImage
            :isShowTip="true"
            :file-type="['jpg', 'png', 'jpeg']"
            file-pixel="640*670"
            :file-size="2"
            @on-change="uploadStartPageChange"
            v-model="formData.startPage"
          />
        </el-form-item>
        <el-form-item label="暂无数据图" prop="noDataIcon">
          <UploadImage
            :isShowTip="true"
            :file-type="['jpg', 'png', 'jpeg']"
            file-pixel="120*120"
            :file-size="2"
            @on-change="uploadNoDataChange"
            v-model="formData.noDataIcon"
          />
        </el-form-item>
        <el-form-item label="管理员二维码" prop="adminQrCode">
          <UploadImage
            :isShowTip="true"
            :file-type="['jpg', 'png', 'jpeg']"
            file-pixel="600*600"
            :file-size="2"
            @on-change="uploadQrCodeChange"
            v-model="formData.adminQrCode"
          />
        </el-form-item>
        <div class="platform-desc">
          <title-line title="积分说明" />
          <el-form-item prop="integralDesc">
            <tinymce ref="tinymce" v-model="formData.integralDesc" />
          </el-form-item>
        </div>
        <el-form-item class="mt-20" style="text-align: center">
          <el-button @click="resetForm"> 取消 </el-button>
          <el-button type="primary" @click="submitForm"> 保存 </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import rules from './rules'
import { OPERATE_STATUS, SERVICE_STATUS } from '@/enum/setting'
export default {
  components: {},
  props: [],
  data() {
    return {
      formData: {
        operationStatus: 0,
        closeReasonUrl: '',
        shopName: '',
        shopMsg: '',
        shopLogoUrl: '',
        address: '',
        customPhone: '',
        isCustom: 0,
        customIcon: '',
        startPage: '',
        adminQrCode: '',
        noDataIcon: '',
        integralDesc: ''
      }
    }
  },
  computed: {
    rules() {
      return rules
    },
    OPERATE_STATUS() {
      return OPERATE_STATUS
    },
    SERVICE_STATUS() {
      return SERVICE_STATUS
    }
  },
  watch: {
    'formData.integralDesc'(val) {
      if (val) {
        this.$refs.elForm.validateField('integralDesc')
      }
    }
  },
  created() {
    this.getBaseSeting()
  },
  mounted() {},
  methods: {
    async getBaseSeting() {
      const { data } = await this.$http.system.base.getBaseSeting()
      for (const key in this.formData) {
        this.formData[key] = data[key]
      }
    },
    submitForm() {
      this.$refs['elForm'].validate(async valid => {
        if (!valid) return
        const params = {
          ...this.formData
        }
        const { status, msg } = await this.$http.system.base.saveBaseSetting(params)
        if (status === 200) {
          this.$message.success('修改成功')
          this.getBaseSeting()
        } else {
          this.$message.error(msg)
        }
      })
    },
    resetForm() {
      this.getBaseSeting()
      this.$refs.tinymce.hasChange = false
    },
    // 上传关闭原因图
    uploadCloseChange() {
      if (this.formData.closeReasonUrl) {
        this.$refs.elForm.validateField('closeReasonUrl')
      }
    },
    // 上传平台logo
    uploadLogoChange() {
      if (this.formData.shopLogoUrl) {
        this.$refs.elForm.validateField('shopLogoUrl')
      }
    },
    // 上传客服图标
    uploadIconChange() {
      if (this.formData.customIcon) {
        this.$refs.elForm.validateField('customIcon')
      }
    },
    // 上传开机页
    uploadStartPageChange() {
      if (this.formData.startPage) {
        this.$refs.elForm.validateField('startPage')
      }
    },
    // 上传管理员二维码
    uploadQrCodeChange() {
      if (this.formData.adminQrCode) {
        this.$refs.elForm.validateField('adminQrCode')
      }
    },
    // 上传暂无数据图
    uploadNoDataChange() {
      if (this.formData.noDataIcon) {
        this.$refs.elForm.validateField('noDataIcon')
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.platform-desc {
  /deep/ .el-form-item__content {
    margin: 0 !important;
  }
}
</style>
